<template>
  <el-dialog :close-on-click-modal="false"
             :visible.sync="addressView"
             append-to-body
             class="modal"
             title="选择商品" width="950px">

    <el-row  :gutter="24"  :loading="loading" >
      <el-select @change="selectChanged" v-model="productId" filterable clearable>
        <el-option v-for="item in productDataList" :disabled="item.disabled === 0"
        :value="{value:item.id,label:item.storeName,stock:item.stock}" :key="item.storeName" :label="item.storeName" ></el-option>
      </el-select>
      <span>{{productNameSpan}}</span>
    </el-row>
    <br />
    <el-row  :gutter="24"  :loading="loading" >
        <el-input v-model="number" placeholder="请输入商品数量" style="width: 228px"/>
         <span>当前产品库存{{stock}}</span>
    </el-row>
    <div slot="footer">
      <el-button @click="close">取消</el-button>
      <el-button type="primary" @click="confirm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { productList } from '@/api/yxStoreProduct'
  import CRUD, {presenter, header, form, crud} from '@crud/crud'
  import rrOperation from '@crud/RR.operation'
  import crudOperation from '@crud/CRUD.operation'
  import udOperation from '@crud/UD.operation'
  import MaterialList from "@/components/material";
  export default {
    name: 'city',
    props: {
      type: {
        type: Number,
        default: 0
      }
    },
    components: {crudOperation, rrOperation, udOperation, MaterialList,productList},
    mixins: [header(), crud()],
    data () {
      return {
        addressView: false,
        loading: false,
        productId: "",
        productName: "",
        productNameSpan: "请选择产品",
        number: "",
        stock:"",
        productDataList:[]
      }
    },
    methods: {
      enter (index) {
        this.activeCity = index;
      },
      leave () {
        this.activeCity = null;
      },
      getCityList () {

        productList().then(res => {
          this.productDataList = res;
        })
      },

    selectChanged(params) {
      const { value, label,stock } = params
      this.productId = value;
      this.productName = label;
      this.productNameSpan = label;
      this.number = stock;
      this.stock = stock;
    },
      // 确定;
      confirm () {
        let number = this.number;
        let stock = this.stock;
        if(stock >= number){
         let selectList = [this.productId,this.productName,this.number];

         this.$emit('selectCity', selectList, this.type);
         this.addressView = false;
         this.productId = "";
         this.number = "";
         this.productName = "";
         this.productNameSpan = "请选择产品";
        }else{
          alert("输入数量超过当前库存，请修改（当前库存:"+stock+"输入数量:"+number+"）");
        }

      },
      close () {
        this.addressView = false;
        this.productId = "";
        this.number = "";
        this.productName = "";
        this.productNameSpan = "请选择产品";
      }
    },
    mounted () {
    }
  }
</script>

<style scoped>
  .modal .item {
    position: relative;
    margin-bottom: 20px;
  }

  .modal .item .city {
    position: absolute;
    z-index: 9;
    top: 17px;
    width: 100%;
    padding-top: 18px;
  }

  .modal .item .city .checkBox {
    width: 97%;
    padding: 10px;
    border: 1px solid #eee;
    background-color: #fff;
    max-height: 100px;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .modal .item .city .checkBox .arrow {
    position: absolute;
    top: 3px;
    width: 0;
    height: 0;
    border: 8px solid transparent;
    border-bottom-color: #ddd;
  }

  .modal .item .city .checkBox .arrow:before {
    position: absolute;
    bottom: -8px;
    right: -7px;
    content: "";
    width: 0;
    height: 0;
    border: 7px solid transparent;
    border-bottom-color: #fff;
  }

  .modal .item .city .checkBox .itemn {
    margin-bottom: 10px;
  }

  .radio {
    padding: 5px 0;
    font-size: 14px !important;
  }

  .red {
    color: #ff0000;
  }

  .empty {
    cursor: pointer;
    margin-left:10px
  }
</style>
